<template>
   <view class="uv-page">
      <view>
         <uv-cell-group>
            <uv-cell
               @click="showCalendar(index)"
               :title="item.title"
               v-for="(item, index) in list"
               :key="index"
               :label="values[index]"
               isLink
            >
               <template v-slot:icon>
                  <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
               </template>
            </uv-cell>
         </uv-cell-group>
         <view style="margin: 30rpx -15px">
            <uv-calendars
               v-if="show"
               :insert="true"
               :lunar="true"
               start-date="2021-01-01"
               end-date="2030-01-01"
               @change="confirm"
            />
         </view>
         <uv-calendars ref="calendar2" @confirm="confirm" />
         <uv-calendars ref="calendar3" mode="multiple" @confirm="confirm" />
         <uv-calendars ref="calendar4" mode="range" @confirm="confirm" />
         <uv-calendars
            ref="calendar5"
            mode="range"
            :date="date5"
            color="#f56c6c"
            confirm-color="#f56c6c"
            @confirm="confirm"
         />
         <uv-calendars
            ref="calendar6"
            mode="range"
            title="选择日期"
            start-text="住店"
            end-text="离店"
            :selected="selected"
            @confirm="confirm"
         />
         <uv-calendars
            ref="calendar7"
            :startDate="startDate"
            :endDate="endDate"
            @confirm="confirm"
         />
         <uv-calendars ref="calendar8" lunar @confirm="confirm" />
         <uv-calendars ref="calendar9" :date="defaultDate" @confirm="confirm" />
         <uv-calendars ref="calendar10" mode="multiple" :date="date10" @confirm="confirm" />
         <uv-calendars ref="calendar11" mode="range" :date="date11" @confirm="confirm" />
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 创建日期
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
const monthStr = month < 10 ? `0${month}` : `${month}`;

// 响应式数据
const show = ref(false);
const index = ref(0);
const values = ref(['', '', '', '', '', '', '', '']);

// 日期相关数据
const startDate = ref(`${year}-${monthStr}-02`);
const endDate = ref(`${year}-${monthStr}-20`);
const selected = ref([
   { date: `${year}-${monthStr}-02`, info: '签到', badge: true, infoColor: '#ff0000' },
   {
      date: `${year}-${monthStr}-06`,
      info: '余10',
      infoColor: '#19be6b',
      topinfo: '￥100',
      topinfoColor: '#19be6b',
   },
]);
const defaultDate = ref(`${year}-${monthStr}-15`);
const date5 = ref([`${year}-${monthStr}-08`, `${year}-${monthStr}-20`]);
const date10 = ref([`${year}-${monthStr}-08`, `${year}-${monthStr}-16`, `${year}-${monthStr}-24`]);
const date11 = ref([`${year}-${monthStr}-08`, `${year}-${monthStr}-20`]);

// 列表数据
const list = ref([
   {
      title: '插入模式',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png',
   },
   {
      title: '单个日期',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/7.png',
   },
   {
      title: '多个日期',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/8.png',
   },
   {
      title: '日期范围',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/9.png',
   },
   {
      title: '自定义主题颜色',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/15.png',
   },
   {
      title: '自定义文案',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/14.png',
   },
   {
      title: '限制日期选择范围',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/13.png',
   },
   {
      title: '显示农历',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/5.png',
   },
   {
      title: '默认单个日期',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png',
   },
   {
      title: '默认多个日期',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png',
   },
   {
      title: '默认日期范围',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png',
   },
]);

// 组件引用
const calendar2 = ref();
const calendar3 = ref();
const calendar4 = ref();
const calendar5 = ref();
const calendar6 = ref();
const calendar7 = ref();
const calendar8 = ref();
const calendar9 = ref();
const calendar10 = ref();
const calendar11 = ref();

// 方法
const showCalendar = (idx: number) => {
   index.value = idx + 1;
   if (index.value === 1) {
      show.value = !show.value;
      return;
   }

   // 根据索引获取对应的calendar引用
   const calendarRefs = {
      2: calendar2,
      3: calendar3,
      4: calendar4,
      5: calendar5,
      6: calendar6,
      7: calendar7,
      8: calendar8,
      9: calendar9,
      10: calendar10,
      11: calendar11,
   };

   const calendarRef = calendarRefs[index.value as keyof typeof calendarRefs];
   if (calendarRef?.value?.open) {
      calendarRef.value.open();
   }
};

const confirm = (e: any) => {
   let time: string | null = null;

   if (e.range?.before && e.range?.after) {
      time = `${e.range.before} 至 ${e.range.after}`;
   } else if (e.multiple?.data?.length) {
      time = e.multiple.data.length > 1 ? `${e.multiple.data[0]}等多个日期` : e.multiple.data[0];
   } else {
      time = e.fulldate;
   }

   if (time) {
      uni.showToast({
         icon: 'none',
         title: time,
      });
   }
};
</script>

<style lang="scss" scoped></style>
